<!--考勤统计-->
<template>
  <div class="app-page">
    <v-card>
      <v-container fluid grid-list-sm>
        <v-layout row wrap>
          <!-- 班级管理 -->
          <v-flex xs12>
            <classManage
              @handleClass="handleClass"
              :classList="classList"
              :handleClassIndex="handleClassIndex"
            ></classManage>
          </v-flex>

          <!-- 时间选择 -->
          <v-flex xs12>
            <v-card flat tile>
              <v-date-picker v-model="picker" full-width locale="zh-cn"></v-date-picker>
            </v-card>
          </v-flex>

          <!-- 考勤类型 -->
          <v-flex xs12>
            <v-card flat>
              <v-card-title primary class="title blue--text">考勤类型</v-card-title>
              <v-container fluid grid-list-xs>
                <v-layout row wrap>
                  <v-flex d-flex xs4 text-xs-center v-for="(item,index) of attendList" :key="index">
                    <v-card
                      @click="handleAttend(index)"
                      :color="handleAttendIndex===index?'#4bbaf4':''"
                      :class="{'white--text':handleAttendIndex===index,'blue--text':handleAttendIndex!=index}"
                    >
                      <v-card-text>{{item}}</v-card-text>
                    </v-card>
                  </v-flex>
                </v-layout>
              </v-container>
            </v-card>
          </v-flex>

          <!-- 统计数据 -->
          <v-flex xs12>
            <v-card flat>
              <v-container>
                <v-layout row wrap class="text-xs-center">
                  <v-flex d-flex xs12 sm6 v-for="(item,index) of countData" :key="index">
                    <v-flex xs5>
                      <span>{{item.name}}</span>
                    </v-flex>
                    <v-flex xs6>
                      <v-progress-linear
                        height="15"
                        color="warning"
                        :value="item.value/count*100"
                        style="margin-top:0.15rem;"
                      ></v-progress-linear>
                    </v-flex>
                    <v-flex xs2>
                      <span>{{item.value}}</span>
                    </v-flex>
                  </v-flex>
                </v-layout>
              </v-container>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-card>
  </div>
</template>
<script>
import classManage from "../../components/layouts/classManage.vue";
export default {
  components: {
    classManage
  },
  data() {
    return {
      picker: new Date().toISOString().substr(0, 10),
      selectClass: "",
      classList: [
        {
          floor: "7#",
          room: "301-302",
          class: "2018001班"
        },
        {
          floor: "7#",
          room: "303-304",
          class: "2018002班"
        },
        {
          floor: "7#",
          room: "305-306",
          class: "2018003班"
        }
      ],
      attendList: ["早自习", "晚自习", "教学"],
      count: 50,
      countData: [
        //给人数除以总人数count
        { name: "到课", value: 10 },
        { name: "事假", value: 5 },
        { name: "病假", value: 10 },
        { name: "迟到", value: 15 },
        { name: "旷课", value: 7 },
        { name: "参加学生社团", value: 1 },
        { name: "参加学生组织", value: 20 },
        { name: "上起航晚自习", value: 2 },
        { name: "工作室培训", value: 6 }
      ],
      handleClassIndex: 0,
      handleAttendIndex: 0
    };
  },
  methods: {
    handleClass(index) {
      this.handleClassIndex = index;
      this.selectClass =
        this.classList[index].floor + this.classList[index].room;
    },
    handleAttend(index) {
      this.handleAttendIndex = index;
    }
  }
};
</script>
<style lang='less' scoped>
@import "~@/common/css/appPage.less";
</style>